Skip to content

fix(badges): médaillons ×N / ÷N lisibles et cohérents (fin des emojis) - #69

Merged
isc merged 2 commits into
mainfrom
fix/division-badge-visuals
Jul 1, 2026
Merged

fix(badges): médaillons ×N / ÷N lisibles et cohérents (fin des emojis)#69
isc merged 2 commits into
mainfrom
fix/division-badge-visuals

Conversation

@isc

@isc isc commented Jul 1, 2026

Copy link
Copy Markdown
Owner

Feedback traité

« Il faut améliorer le visuel des badges. Les badges pour les divisions qu'il faut obtenir sont vraiment vilains avec le signe divisé en noir sur fond bleu foncé. »
— feedback du 29/06, 40 séances, 36/36 maîtrisés

Problème

Les 8 badges « Divisions par N » utilisaient tous l'emoji (U+2797). iOS le rend en glyphe sombre → quasi noir sur le médaillon indigo (#4F46BA), donc illisible. Bonus : les 8 badges étaient visuellement identiques (impossible de distinguer « Divisions par 2 » de « Divisions par 7 »).

Correctif

  1. Division : icône remplacée par un glyphe texte ÷N (÷2…÷9), rendu blanc serif par .badge-medallion : lisible, contrasté, et distinct d'un badge à l'autre.
  2. Multiplication : pour rester cohérent, les badges « Table de N » passent aussi des keycaps emoji N️⃣ (stickers colorés qui juraient) à un glyphe texte ×N (×2…×9), même traitement blanc serif.
  3. Ajout de font-family: var(--serif) + font-weight au grand médaillon (BadgeDetailModal) pour un rendu net dans la fiche détail.

Résultat : une grille de badges homogène, tous les médaillons numérotés dans le même style.

Avant / Après

Avant (keycaps emoji + ➗ sombre) Après (×N / ÷N blancs, cohérents)

Screenshots pris avec un profil de démo (toutes les tables + divisions maîtrisées) pour rendre les badges de division visibles.

🤖 Generated with Claude Code

…moji ➗)

Les 8 badges « Divisions par N » utilisaient tous l'emoji ➗ (U+2797),
rendu en glyphe sombre par iOS — quasi noir sur le médaillon indigo
(#4F46BA), donc illisible — et les 8 étaient visuellement identiques.

Remplacé par un glyphe texte « ÷N » (÷2…÷9), rendu blanc serif par
.badge-medallion : lisible, contrasté, et distinct d'un badge à l'autre,
en miroir des badges de multiplication numérotés. Ajout de font-family
serif + weight au grand médaillon (BadgeDetailModal) pour un rendu net.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Preview supprimée (PR fermée). Les URLs ne sont plus accessibles.

Les badges « Table de N » utilisaient les keycaps emoji N️⃣ (stickers
colorés) qui juraient à côté des médaillons de division épurés (÷N blanc
serif). Passés en glyphe texte ×N (×2…×9), même traitement blanc serif :
la grille de badges est visuellement homogène.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@isc isc changed the title fix(badges): médaillons de division lisibles (÷N au lieu de l'emoji ➗) fix(badges): médaillons ×N / ÷N lisibles et cohérents (fin des emojis) Jul 1, 2026
@isc
isc merged commit 159c826 into main Jul 1, 2026
2 checks passed
@isc
isc deleted the fix/division-badge-visuals branch July 1, 2026 07:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant